<template>
	<view class="content">
		<view class="topVideo">
			<image class="topVideo_cover" src="../../imgs/pet4.jpg" mode=""></image>
			<image class="topVideo_bofang" src="../../imgs/bofang.png" mode=""></image>
		</view>
		<!-- 公告 -->
		<view class="information">
			<text>公告:</text>
			<text>好心人请送我家皮皮回家</text>
		</view>
		<!-- 基本信息 -->
		<view class="basicInfo">
			<view class="petFile">
				<image src="../../imgs/chongwudangan.png" mode=""></image>
				<view class="">宠物档案</view>
			</view>
			<view class="hostPhone">
				<image src="../../imgs/call.png" mode=""></image>
				<view class="">主人电话</view>
			</view>
		</view>
		<!-- 作品&喜欢 -->
		<view class="workLike">
			<view class="workLike_Top">
				<view class="workLike_Top_work" :class="!workLikeIs?'border_active':''" @click="changeWorkLike_work">
					<text>作品</text>
					<text>0</text>
				</view>
				<view class="workLike_Top_like" :class="workLikeIs?'border_active':''" @click="changeWorkLike_like">
					<text>喜欢</text>
					<text>0</text>
				</view>
			</view>
			
			<view class="workLike_Con">
				<!-- 无作品 -->
				<view class="workLike_Con_work_Null" v-if="!workLikeIs&&workNullIs">
					<view class="">
						<p>您还没发布作品哦!</p>
						<p>尽快下载“小宠书APP”绑定宠物牌上传作品吧！</p>
					</view>
				</view>
				
				<!-- 有作品 -->
				<view class="workLike_Con_work_Full" v-if="!workLikeIs&&!workNullIs">
					<template>
						<view class="workCon">
							<image src="../../imgs/pet1.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					
					<template>
						<view class="workCon">
							<image src="../../imgs/pet3.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					
					<template>
						<view class="workCon">
							<image src="../../imgs/pet2.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					
					<template>
						<view class="workCon">
							<image src="../../imgs/pet5.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					
					<template>
						<view class="workCon">
							<image src="../../imgs/pet6.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					<template>
						<view class="workCon">
							<image src="../../imgs/pet6.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					<template>
						<view class="workCon">
							<image src="../../imgs/pet6.png" class="workCon_cover" mode="widthFix"></image>
							<image src="../../imgs/play.png" class="workCon_play" mode=""></image>
							<view class="workCon_Title">
								happy
							</view>
							<view class="workCon_bottom">
								<view class="workCon_bottom_user">
									<view class="userImg">
										<image src="../../imgs/userImg.jpg" mode=""></image>
									</view>
									<text>happy</text>
								</view>
								<view class="workCon_bottom_zan">
									<image src="../../imgs/petCarZanAfter.png" mode=""></image>
									<text>230</text>
								</view>
							</view>
						</view>
					</template>
					
				</view>
				
				<!-- 无喜欢 -->
				<view class="workLike_Con_like_Null" v-if="workLikeIs&&likeNullIs">
					<view class="">
						<p>您暂时还没有喜欢的作品哦!</p>
						<p>尽快下载“小宠书APP”绑定宠物牌寻找喜欢的作品吧！</p>
					</view>
				</view>
				<!-- 有喜欢 -->
				<view class="workLike_Con_like_Full" v-if="workLikeIs&&!likeNullIs">
					
				</view>
			</view>
			
			<view class="bottom">
				<view class="videoCourse">
					视频教程
				</view>
				<view class="downLoadApp">
					下载小宠书APP
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
			data() {
				return{
					workLikeIs:0,//0表示作品 1表示喜欢
					workNullIs:false,//作品空
					likeNullIs:true,//喜欢空
				}
			},
			onLoad() {
				
			},
			methods:{
				changeWorkLike_work:function(){
					this.workLikeIs=0;
				},
				changeWorkLike_like:function(){
					this.workLikeIs=1;
				}
			}
	}
</script>

<style>
	@import url("Petcard.css");
</style>
